<!-- 横向选项卡（水平滚动导航栏） -->
<template>
	<view class="total">
		<!-- 顶部导航栏 -->
		<view class="horizonal-tab">
			<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
				<block v-for="(item,index) in tabBars" :key="index">
					<view class="scroll-tab-item" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
						{{item.name}}
						<view class="scroll-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view>

		<!-- 内容区 -->
		<view class="content">
			<!-- 滑块视图 -->
			<swiper :current="tabIndex" @change="tabChange">
				<!-- current:当前所在滑块的index -->
				<swiper-item v-for="(content,index) in contentList" :key="index">
				
				<view class="answerModul">
					<view class="answerModul-item">
						<view class="iconfont icon-zhenduixinglianxi"></view>
						<text>专项练习</text>
					</view>
					
					<view class="answerModul-item">
						<view class="iconfont icon-cuotiben"></view>
						<text>错题集合</text>
					</view>
					
					<view class="answerModul-item">
						<view class="iconfont icon-suijisenlin"></view>
						<text>随机练习</text>
					</view>
					
					
				</view>
				
				<!-- 考试、顺序练习 -->
				<view class="examModul">
					<view class="examModul-item">
						<view class="iconfont icon-lianxi1"></view>
						<text >顺序练习</text>
					</view>
					
					
					<view class="examModul-item">
						<view class="iconfont icon-kaoshi"></view>
						<text >模拟考试</text>
					</view>
					
					
					
				</view>
				
				
				
				
				
				
				
				</swiper-item>
			</swiper>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				/* 选中标签栏的序列,默认显示第一个 */
				contentList: [
					"科目一",
					"科目四",
					
					
				],
				tabBars: [{
						name: '科目一',
						id: 'guanzhu'
					},
					{
						name: '科目四',
						id: 'tuijian'
					}
					
					
				]
			}
		},
		methods: {
			//切换选项卡
			toggleTab(index) {
				this.tabIndex = index;
			},
			//滑动切换swiper
			tabChange(e) {
				console.log(e);
				this.tabIndex = e.detail.current;
			}
		}
	}
</script>

<style>

	.horizonal-tab {
		margin: auto,25rpx;
	}

	.horizonal-tab .active {
		color: #55aaff;
	}

	.scroll-tab {	
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		border-bottom: 1rpx solid #eee;
		text-align: center;
		/* padding:  auto,25rpx; */
		
	}

	.scroll-tab-item {
		display: inline-block;
		/* 必要，导航栏才能横向*/
		margin: 20rpx 30rpx 0 30rpx;
		
		/* width: 50%; */
	}

	.active .scroll-tab-line {
		border-bottom: 5rpx solid #55aaff;
		/* border-top: 5rpx solid red; */
		border-radius: 20rpx;
		width: 70rpx;

	}
	
	/* 内容区域 */
	
	

	
	.answerModul{
		display: flex;
		  /* flex-direction: column; */
		        /* height: 100%; */
		
	}
	
	.answerModul-item{
		width: 33%;
		text-align: center;
	}
	.answerModul-item .iconfont{
		width: 120rpx;
		height: 120rpx;
		background-color: #ebeeff;
		border-radius: 60rpx;
		margin: 10rpx auto;
		line-height: 120rpx;
	}
	
	.examModul{
		  display: flex;
		  /* flex-direction: column;//设置布局方向为竖直 */
	
	}
	
	.examModul-item{
		width: 50%;
		text-align: center;
	}
	
	.examModul-item .iconfont{
		width: 120rpx;
		height: 120rpx;
		background-color: #3cc2ff;
		border-radius: 60rpx;
		margin: 10rpx auto;
		line-height: 120rpx;
	}
	
	swiper {
	    display: block;
	    height: 200px;
	}
	
	
	
</style>